<template>
  <div>
    <div class="select-wrapper" style="padding-bottom: 8px">
      <div class="title">出车统计</div>
      <div class="select">
        <time-picker ref="timeRef" @change="handleChange"/>
        <el-radio-group size="mini" v-model="searchType" style="margin-left: 10px" @change="handleTrend">
          <el-radio-button label="车辆"></el-radio-button>
          <el-radio-button label="驾驶员"></el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <el-table
        id="tableData" class="table-list set_table-list" header-row-class-name="custom_table_header"
              :data="monthCarTable" row-key="id" border fit>
      <el-table-column v-for="(item,index) in tableHead"
                       :key="index"
                       :width="setColumWidth(item.label)"
                       :label="item.label"
                       :property="item.property"
                       :index="item.index"
                       align="center">
        <template slot-scope="scope">
          <div>
            <p v-if="scope.column.property !== 'outInfo'">{{ scope.row[scope.column.property] }}</p>
            <template v-else>
              <span class="circleEle"
                    v-if="isNaN(scope.row[scope.column.property][scope.column.index].result) && scope.row[scope.column.property][scope.column.index].result == '忙'"></span>
              <span class="numberEle"
                    v-if="!isNaN(scope.row[scope.column.property][scope.column.index].result)">
                {{ scope.row[scope.column.property][scope.column.index].result == '0' ? ' ' : scope.row[scope.column.property][scope.column.index].result }}
              </span>
            </template>

            <!--            <p :style="{color:scope.row[scope.column.property][scope.column.index].result === '闲'? 'green':'red'}" v-else>
                          <span class="circleEle" v-show="scope.row[scope.column.property][scope.column.index].result == '闲'"></span>
                        </p>-->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="more" @click="toggle">{{ getMoreName }} <i :class="getIconMore"></i></div>
  </div>
</template>

<script>
import {debounce} from 'lodash'
import {countCarOut, countDriverOut} from "@/api/services/dashboard.service";
import timePicker from './time-picker'

export default {
  name: "carInfoMonth",
  components: {timePicker},
  computed: {
    getMoreName() {
      return this.isToggle ? '收起' : '展开更多'
    },
    getIconMore() {
      return this.isToggle ? 'el-icon-caret-top' : 'el-icon-caret-bottom'
    },
  },
  data() {
    return {
      isToggle: false,
      searchType: '车辆',
      params: {
        sort: 'ASC',
        year: '',
        month: ''
      },
      monthCarTable: [],
      tableHead: []
    }
  },
  mounted() {
    this.currentTableHeight = 0
    this.$nextTick(() => {
      let {year, moment, allMoment} = this.$refs.timeRef.initTime()
      this.params.year = year
      this.params.month = moment === 99 ? allMoment : moment
      this._fetch()
      this.setTableHeight()
    })
  },
  methods: {
    toggle() {
      this.isToggle = !this.isToggle
      this.height = this.isToggle ?  this.setTableFull() : this.setTableHeight()
    },
    setTableHeight(height = 576) {
      let tableEle = document.getElementById('tableData')
      tableEle.style.height = height + 'px'
      tableEle.style.overflow = 'auto'
    },
    setTableFull() {
      let tableEle = document.getElementById('tableData')
      tableEle.style.height = 'auto'
      tableEle.style.overflow = 'hidden'
    },
    handleTrend(data) {
      this.searchType = data
      this._fetch()
    },
    handleChange({year, moment, allMoment}) {
      this.params.year = year
      this.params.month = moment === 99 ? allMoment : moment
      this._fetch()
    },
    _fetch() {
      let getFetch = this.searchType === '车辆' ? countCarOut : countDriverOut
      getFetch(this.params).then(res => {
        if (res.code !== 1) {
          this.U.qerror(res.msg);
          return
        }

        let header = []
        if (this.searchType === '车辆') {
          this.monthCarTable = res.data.map(item => ({...item, plateNum: `${item.plateNum}/${item.seats}`}))
          header = [
            {label: '车牌', property: 'plateNum'},
            {label: '均值', property: 'avgResult'},
            {label: '天数', property: 'outDay'},
          ]
        } else {
          this.monthCarTable = res.data
          header = [
            {label: '驾驶员', property: 'driver'},
            {label: '均值', property: 'avgResult'},
            {label: '天数', property: 'outDay'},
          ]
        }

        this.tableHead = this.normalizeData(header, res.data)
      })
    },
    normalizeData(header, data) {
      const tableHead = []
      const selectStatistics = data[0].outInfo
      selectStatistics.forEach((item, index) => {
        tableHead.push({index: index, property: 'outInfo', label: item.date}) // 动态表头
      })

      // 这里是固定的表头
      return [...header, ...tableHead]
    },
    setColumWidth(data) {
      if (data === '车牌') {
        return '100'
      }
      if (data === '均值' || data === '天数') {
        return '50'
      }
      if (!isNaN(data)) {
        return '40'
      }
    },
  }
}
</script>

<style lang="less">
.custom_table_header {
  .cell {
    padding: 4px 0 !important;
  }
}

.set_table-list {
  width: 100%;
  height: 576px;

  .el-table__row {
    .cell {
      line-height: 0 !important;
    }
  }

  p {
    margin: 10px 0;
  }
}
</style>
<style lang="less" scoped>
.circleEle {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1px solid #14b414;
  border-radius: 20px;
}

.numberEle {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  color: #474747;
}

.more {
  padding: 10px 0;
  border: 1px solid #EBEEF5;
  font-size: 13px;
  margin-top: -1px;
  text-align: center;

  &:hover {
    cursor: pointer;
    color: #3A71A8;
  }
}

.select-wrapper {
  display: flex;
  padding: 5px 0;
  align-items: center;
  justify-content: space-between;

  .title {
    border-bottom: none;
    color: #3A71A8;
    font-size: 18px;
    font-weight: bold;
  }

  .select {
    flex: 1;
    align-items: center;
    text-align: right;

    div {
      display: inline-block;
      margin-right: 10px;
    }
  }
}

.tableHeader {
  width: 100%;
  border: 1px solid #ebeef5;
  font-size: 14px;
  border-bottom: none;
  padding: 12px 0;
  text-align: center;
}

</style>
